<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            p{
                font-size: 20px;
            }
            /* 
                伪元素,表示页面中一些特殊的并不真实存在的元素(特殊的位置)
                    伪元素使用 ::开头

                    ::first-letter表示第一个字母
                    ::selection表示选中的内容
                    ::first-line表示第一行
                    ::before元素的开始位置
                    ::after元素的最后位置
                        -before和after必须结合content使用
                    

            */
            p::first-letter{
                font-size: 50px;
            }
            p::first-line{
                color: red;
            }
            p::selection{
                color: blue;
            }
            div::before{
                color: red;
                content: 'abc';
            }
            div::after{
                content:"hh";
                color: blue;
            }
    </style>
</head>
<body>
    <q>hello</q>
    <div>hello hello how are you</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo numquam quos unde ducimus consequatur quam? Eius esse mollitia ullam vel culpa maiores suscipit, consequatur amet rerum nam labore omnis dolorem.</p>
</body>
</html>